<template>
  <div>
    <m-form
      inline
      ref="form"
      label-width="100px"
      :options="inlineOptions"
      >
        <template #action="scope">
          <div>
            <el-button type="primary" @click="onSubmit(scope)">搜索</el-button>
            <el-button  @click="resetInlineForm">重置</el-button>
          </div>
        </template>
    </m-form>
    <hr>
    <br>
    <m-form
      ref="form"
      label-width="100px"
      :options="options"
      @on-change="handleChange"
      @before-upload="handleBeforeUpload"
      @on-preview="handlePreview"
      @on-remove="handleRemove"
      @before-remove="beforeRemove"
      @on-success="handleSuccess"
      @on-exceed="handleExceed">
        <template #uploadArea>
          <el-button size="small" type="primary">Click to upload</el-button>
        </template>
        <template #uploadTip>
          <div style="color: #ccc;font-size: 12px;margin-left: 12px;">
            jpg/png files with a size less than 500KB.
          </div>
        </template>
        <template #action="scope">
          <div>
            <el-button type="primary" @click="onSubmit(scope)">提交</el-button>
            <el-button  @click="resetForm">重置</el-button>
          </div>
        </template>
    </m-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { options, inlineOptions }  from './config/options'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'

interface Scope {
  form: FormInstance,
  model: any
}

const handleRemove = (file: File, fileList: FileList) => {
  // console.log('handleRemove')
  // console.log(file, fileList)
}
const handlePreview = (file: File) => {
  // console.log('handlePreview')
  // console.log(file)
}
const beforeRemove = (val: any) => {
  // console.log('beforeRemove')
  // return ElMessageBox.confirm(`Cancel the transfert of ${val.file.name} ?`)
  return ElMessage.warning(`Cancel the transfert of ${val.file.name}`)
}

const handleExceed = (val: any) => {
  // console.log('handleExceed', val)
  ElMessage.warning(
    `The limit is 3, you selected ${val.files.length}
    files this time, add up to ${val.files.length + val.fileList.length} totally`
  )
}
const handleSuccess = (val: any) => {
  // console.log('success')
  // console.log(val)
}
const handleChange = (val: any) => {
  // console.log('change')
  // console.log(val)
}
const handleBeforeUpload = (val: any) => {
  // console.log('handleBeforeUpload')
  // console.log(val)
}

let form = ref()
let inlineForm = ref()

const resetForm = () => {
  form.value.resetForm()
}

const resetInlineForm = () => {
  inlineForm.value.resetFields()
}

const onSubmit = (scope: Scope) => {
  scope.form.validate((valid) => {
    if(valid){
      console.log('onSubmit!', scope.model)
      return ElMessage.success('提交成功!')
    }

    return ElMessage.error('表单填写有误, 请检查!')
  })
}

</script>

<style lang="scss" scoped>

</style>